<!--
/*
 * Copyright (C) 2021 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */
-->
<div class="job_display">
  <mat-grid-list cols="3" rowHeight="320px">
    <mat-grid-tile [colspan]="1" [rowspan]="1">
      <app-projects (getJobs)="getJobs($event)"></app-projects>
      <!-- this receives the event from the projects component -->
    </mat-grid-tile>
    <mat-grid-tile [colspan]="1" [rowspan]="1">
      <mat-card class="dashboard-card">
        <mat-card-title> Get by Job Id</mat-card-title>
        <mat-grid-list cols="10" rowHeight="3em">
          <mat-grid-tile colspan="10">
            <mat-form-field>
              <input matInput id="jobId" placeholder="<project>:<location>.<jobid>" [(ngModel)]="jobId">

            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile colspan="10">
            <button mat-raised-button (click)="loadJob()">GET</button>
          </mat-grid-tile>
        </mat-grid-list>
      </mat-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="1" [rowspan]="1">
      <mat-card class="dashboard-card">
        <mat-card-title> Upload from Computer </mat-card-title>
        <mat-card-subtitle>
          Upload job files that have previously been downloaded to the computer
        </mat-card-subtitle>
        <mat-card-content class="dashboard-card-content">
          <mat-grid-list cols="10">
            <mat-grid-tile colspan="10">
              <button mat-raised-button (click)="openInput()">
                Select File to Upload
              </button>
              <input id="fileInput" hidden type="file" (change)="fileChange($event.target.files)" />
            </mat-grid-tile>
            <mat-grid-tile colspan="10" >
              <span id="filenamedisp">
                nothing selected
              </span>
            </mat-grid-tile>
            <mat-grid-tile colspan="10">
              <button mat-raised-button [disabled]="!planFile" (click)="upload()">
                Upload
              </button>
            </mat-grid-tile>

          </mat-grid-list>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>
  <div>
    <!-- show list of jobs -->

    <div *ngIf="jobs">
      <mat-paginator [length]="jobs.length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
        (page)="switchPage($event)">
      </mat-paginator>
      <table mat-table cdkScrollable [dataSource]="paginatedJobs" class="mat-elevation-z8">
        <!-- State Column -->
        <ng-container matColumnDef="state">
          <th mat-header-cell *matHeaderCellDef>State</th>
          <td mat-cell *matCellDef="let element">{{ element.state }}</td>
        </ng-container>
        <!-- id Column -->
        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef>Id</th>
          <td mat-cell class="SQL" *matCellDef="let element">
            {{ element.shortenedJobId | slice: 0:80 }}
          </td>
        </ng-container>
        <!-- location Column -->
        <ng-container matColumnDef="location">
          <th mat-header-cell *matHeaderCellDef>Id</th>
          <td mat-cell *matCellDef="let element">{{ element.location }}</td>
        </ng-container>

        <!-- date Column -->
        <ng-container matColumnDef="timestamp">
          <th mat-header-cell *matHeaderCellDef>Date Time</th>
          <td mat-cell *matCellDef="let element">
            {{ element.startTime | date: 'short' }}
          </td>
        </ng-container>
        <ng-container matColumnDef="btn">
          <th mat-header-cell *matHeaderCellDef>select</th>
          <td mat-cell *matCellDef="let element">
            <button mat-icon (click)="selectJob(element)">
              <mat-icon>cloud_download</mat-icon>
            </button>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>
    </div>
  </div>
</div>